<template>
  <div class="content">
    <!-- 查询 -->
    <screen class="screen" @childMsg="showChildMsg"  @clear="getList"/>
    <!-- 新增 -->
    <el-button class="add" type="success" @click="dialog = true; " size="small">新增</el-button>
    <!-- 列表数据展示 -->
    <el-table :data="tableData" style="width: 100%"
      highlight-current-row :empty-text="emptyText">
      <el-table-column prop="uid" label="用户id" align="center">
      </el-table-column>
      <el-table-column prop="uname" label="用户名" align="center">
      </el-table-column>
      <!-- <el-table-column prop="role" label="角色" align="center">
      </el-table-column> -->
      <el-table-column prop="tel" label="联系电话" align="center">
      </el-table-column>
      <el-table-column prop="addr" label="地址" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="query.current" :page-sizes="[5, 10, 15, 20]" :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 弹出框 -->
    <div class="content">
      <el-dialog :title="form.uid ? '修改信息' : '新增员工'" :visible.sync="dialog" width="35%" append-to-body>
        <dialogCom v-if="dialog" @close="dialogClose" :formData="form" />
      </el-dialog>

    </div>
  </div>

</template>

<script>
import screen from '@/components/HUAI-H-P/screenCom.vue'
import dialogCom from '@/components/HUAI-H-P/dialogCom.vue'
import { findAllUser, deleteUser, findAll } from '@/api/hp/api'
export default {
  components: {
    screen,
    dialogCom
  },
  data() {
    return {
      dialog: false,
      emptyText:'暂无数据',
      // update: false,
      total:0,
      form: {
        uid: '',
        uname: '',
        upass: 123456,
        role: '',
        tel: '',
        addr: ''

      },
      list:[],
      tableData: [
        // {
        //   uname: '王小虎',
        //   upass: 123456,
        //   role: '管理员',
        //   tel: '12345678910',
        //   addr: '立人科技园',

        // },
        // {
        //   uname: '王小二',
        //   upass: 123456,
        //   role: '销售员',
        //   tel: '35345678910',
        //   addr: '南窑国际',
        // },
        // {
        //   uname: '王小萌',
        //   upass: 123456,
        //   role: '管理员',
        //   tel: '12345998910',
        //   addr: '南窑头西区',
        // },
        // {
        //   uname: '王二牛',
        //   upass: 123456,
        //   role: '用户',
        //   tel: '12346978910',
        //   addr: '南窑头东区',
        // },
        // {
        //   uname: '王二丫',
        //   upass: 123456,
        //   role: '用户',
        //   tel: '12377478910',
        //   addr: '绿港',
        // },
        // {
        //   uname: '王二虎',
        //   upass: 123456,
        //   role: '管理员',
        //   tel: '12324508910',
        //   addr: '科技五路',
        // },
        // {
        //   uname: '王萌',
        //   upass: 123456,
        //   role: '管理员',
        //   tel: '12345998910',
        //   addr: 'C座',
        // },
        // {
        //   uname: '小萌',
        //   upass: 123456,
        //   role: '管理员',
        //   tel: '12345998910',
        //   addr: 'B座',
        // },
        // {
        //   uname: '王大炮',
        //   upass: 123456,
        //   role: '超级管理员',
        //   tel: '13508912001',
        //   addr: 'A座',
        // },
      ],
      query: {
        current: 1,
        size: 5,
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      findAllUser(this.query).then((res) => {
        if (res.code === 1017) {
           this.total=0;
          this.tableData=[];
          this.emtytext='无权访问'
          this.$router.push('/home/access')
        }else{
         
          this.tableData = res.data.records;
        this.total = res.data.total;
         
        }
       
      })
    },
    //查询子组件传递回来的数据处理
    showChildMsg(data) {
        console.log(data);
      this.tableData = data;
      this.total=data.length
    },

    
    handleEdit(row) {
      console.log(row);
      this.dialog = true;
      // this.update = false;
      this.form = JSON.parse(JSON.stringify(row));
      console.log(this.form);
    },
    closeDrawer() { }
    ,
    handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteUser(row).then((res) => {
          console.log(res);

          if (res.code == 1007) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
            this.getList();
          }
        });
      })
    },
    handleSizeChange(val) {
      this.query.current = 1;
      this.query.size = val
      console.log(this.query);
      this.getList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.query.current = val;
      console.log(this.query.size,this.query.current);
      this.getList(this.query);
      // console.log(`当前页: ${val}`);
    },
    dialogClose(type) {
      this.dialog = false;
      this.form = {
        uid: '',
        uname: '',
        upass: 123456,
        role: '',
        tel: '',
        addr: ''
      }
      if (type) {
        if (type == 'add') {
          this.query.current = 1
        }
        this.getList(this.query)
      }
    },


  }

}
</script>

<style lang="scss">
.content {
  margin: 0 20px;
}

.screen {
  margin: 20px 0 10px 20px;
  border: 3px #eee solid;
}

.add {
  margin: 0 0 20px 20px;
}
</style>